<template>
	<view class="head" style="width: 100%;height: 1400rpx;">
		<view class="headtop">
			<image class="box" src="/static/imges/bj.png" mode="widthFix"></image>
			<view class="active">我的</view>
		</view>
		<view class="text-area" >
			<view class="attbox" @click="parten">
				<image class="bue" :src="userMsg.portrait" mode=""></image>
			</view>
			<view class="bold">
				<view class="booor">{{userMsg.name}}</view>
				<text class="boot">
					<uni-dateformat :date="addtime*1000" format="yyyy/MM/dd"></uni-dateformat>到期
				</text>
			</view>
			<view class="bott">
				<text style="color: #E78D2D;">会员</text>
			</view>
		</view>

		<view class="all">
			<view class="anchor" @click="attr">
				<view class="ao">
					{{this.usermsg.room_collection}}
				</view>
				<text style="font-size: 30rpx;">我的收藏</text>
			</view>
			<view class="anchor" @click="login">
				<view class="ao">
					{{this.usermsg.browse}}
				</view>
				<text style="font-size: 30rpx;">浏览记录</text>
			</view>
		</view>
		<image class="appp" src="../../static/imges/details1.png" mode=""></image>

		<view class="atrule">

			<navigator url="../Home/LookingRoom">
				<view class="guan">
					<view class="attr-name">
						<image class="banter" src="../../static/imges/zs.png" mode=""></image>
						<text style="position: relative;top: -10rpx;left: 20rpx;">投放需求</text>
					</view>
					<image class="bohh" src="../../static/imges/you.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="./postedListings">
				<view class="guan">
					<view class="attr-name">
						<image class="banter" src="../../static/imges/zs.png" mode=""></image>
						<text style="position: relative;top: -10rpx;left: 20rpx;">我发布的房源</text>
					</view>
					<image class="bohh" src="../../static/imges/you.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="../Home/Release">
				<view class="guan">
					<view class="attr-name">
						<image class="banter" src="../../static/imges/zs.png" mode=""></image>
						<text style="position: relative;top: -10rpx;left: 20rpx;">发布房源</text>
					</view>
					<image class="bohh" src="../../static/imges/you.png" mode=""></image>
				</view>
			</navigator>


			<view class="guan">
				<view class="attr-name">
					<image class="banter" src="../../static/imges/zs.png" mode=""></image>
					<text style="position: relative;top: -10rpx;left: 20rpx;">在线咨询</text>
				</view>
				<view class="box1">
					<text style="margin-right: 50rpx;color: #666666;position: relative;top: -2rpx;">400378990</text>
					<image class="bohh" src="../../static/imges/you.png" mode=""></image>
				</view>
			</view>

			<view class="guan">
				<view class="attr-name">
					<image class="banter" src="../../static/imges/zs.png" mode=""></image>
					<text style="position: relative;top: -10rpx;left: 20rpx;">设置</text>
				</view>
				<image class="bohh" src="../../static/imges/you.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import instance from "../../api/requset.js"
	export default {
		components: {},
		data() {
			return {
				userMsg: {},
				usermsg:[],
				addtime: '',
				userId: null
			};
		},
		computed: {

		},
		onLoad() {
			var that = this
			uni.getStorage({
			    key: 'id',
			    success: function (res) {
					that.userId = res.data
			    }
			});
			var serverUrl = instance.serverUrl
			uni.request({
				url: serverUrl + '/index.php/api/Member/index', //仅为示例，并非真实接口地址。
				data: {
					userid: this.userId
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				success: (res) => {
					console.log(res.data.data)
					this.usermsg=res.data.data
					this.userMsg = res.data.data.user[0]
					this.addtime = res.data.data.user[0].expire_time
				}
			});

		},
		methods: {
			attr() {
				uni.navigateTo({
					url: `./Collection?id=${this.userId}`
				});
			},
			login() {
				uni.navigateTo({
					url: `./History?id=${this.userId}`
				});
			},
			parten() {
				uni.navigateTo({
					url: './Personal'
				});
			}
		}
	};
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
	}

	.headtop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9;
	}

	.headtop .box {
		position: absolute;
		top: -10rpx;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.headtop .active {
		text-align: center;
		z-index: 9;
		color: #ffffff;
		line-height: 160rpx;
		font-weight: bold;
		font-size: 32rpx;
	}

	.text-area {
		display: flex;
		position: relative;
		z-index: 999;
		top: 150rpx;
	}

	.bue {
		width: 120rpx;
		height: 120rpx;
		border: 5rpx #fff solid;
		border-radius: 50%;
		margin-left: 30rpx;
		position: relative;
		top: -15rpx;
	}

	.bold {
		color: #FFFFFF;
		margin-left: 20rpx;
	}

	.boot {
		position: relative;
		font-size: 12px;
	}

	.bott {
		width: 90rpx;
		height: 40rpx;
		border-radius: 30rpx;
		text-align: center;
		line-height: 40rpx;
		background-color: #3C5B87;
		margin-left: 20rpx;
		font-size: 26rpx;
	}

	.all {
		width: 90%;
		height: 200rpx;
		border-radius: 30rpx;
		background-color: #FFFFFF;
		position: relative;
		margin-left: 5%;
		top: 180rpx;
		z-index: 999;
		display: flex;
		justify-content: space-between;
	}

	.anchor {
		margin: 40rpx 100rpx 0 100rpx;
		text-align: center;
	}

	.ao {
		font-size: 50rpx;
	}

	.appp {
		width: 90%;
		height: 200rpx;
		border-radius: 30rpx;
		margin-left: 5%;
		margin-top: 210rpx;
		z-index: 999;
	}

	.guan {
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.atrule {
		width: 90%;
		height: 530rpx;
		border-radius: 30rpx;
		margin-left: 5%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.banter {
		width: 45rpx;
		height: 40rpx;
		margin-left: 40rpx;
	}

	.bohh {
		width: 35rpx;
		height: 30rpx;
		right: 50rpx;
		margin-top: 50rpx;
	}

	.attr-name {
		margin-top: 50rpx;
	}
</style>
